<template>
  <div
    v-loading="loading"
    class="boxCard"
    element-loading-text="正在加载，请稍后"
  >
    <div v-for="(item, index) in dataList" :key="index" class="card">
      <div class="top">
        <div class="city">{{ item.city }}市</div>
        <p class="weather">
          {{ item.date }} {{ item.update_time }} {{ item.wea }}
        </p>
        <div class="image">
          <div class="temperature">{{ item.tem1 }}℃</div>

          <!-- 阴 -->
          <img
            v-if="item.wea === '阴'"
            src="../../assets/image/013c5307f2321d88ccf4f128c3cdd0a98c1d711bf842-9YhIt7_fw658webp.webp"
            alt=""
          >

          <!-- 多云 -->
          <img
            v-else-if="item.wea === '多云'"
            src="../../assets/image/8c357fdc8d96fc7a4936c3013a9d71533e696f04dab17-YOWEAH_fw658webp.webp"
            alt=""
          >

          <!-- 雨天 -->
          <img
            v-else-if="item.wea === '小雨'"
            src="../../assets/image/14784fce180486128242dc6e38090921d9cf77c0506e0-p1KBPV_fw658webp.webp"
            alt=""
          >

          <!-- 晴 -->
          <img
            v-else
            src="../../assets/image/4755e7115a57d57526c7226e3daa3da57791d1ec7c496-dKspgX_fw240webp.webp"
            alt=""
          >
        </div>
        <div class="hint">
          <img
            v-if="item.air_level != '优' && item.air_level != '良'"
            src="../../assets/image/c457f2e0e1f8525ed6a051692b2572b10b21abe67579-eBfx0O_fw658webp.webp"
            alt=""
          >
          <p>{{ item.air_tips }}</p>
        </div>
      </div>

      <div class="centet">
        <div class="info">
          <p><span>湿度</span>{{ item.humidity }}</p>
          <p><span>风向</span>{{ item.win }}</p>
          <p><span>风力</span>{{ item.win_speed }}</p>
          <p><span>压力</span>{{ item.pressure }}百帕斯卡</p>
        </div>

        <div class="table">
          <p v-for="(row, inx) in item.next_seven_days_weather" :key="inx">
            <span>{{ row.date }}</span>
            <span>{{ row.wea_night }}</span>
            <span>{{ row.tem1 }} / {{ row.tem2 }}℃</span>
          </p>
        </div>
      </div>

      <div class="button">
        <el-button
          type="primary"
          size="small"
          @click="forecastTemperature(item)"
        >预测气温</el-button>
        <el-button
          type="warning"
          size="small"
          @click="weatherForecast(item)"
        >天气预报</el-button>
        <el-button
          type="danger"
          size="small"
          @click="earlyWarning(item)"
        >预警</el-button>
        <el-button
          type="info"
          size="small"
          @click="suggest(item)"
        >生活建议</el-button>
      </div>
    </div>

    <!-- 预测气温 -->
    <el-dialog
      :visible.sync="isShowForecastTemperature"
      title="预测气温"
      @close="isShowForecastTemperature = false"
    >
      <div ref="myChart" style="width: 100%; height: 400px" />
    </el-dialog>

    <!-- 天气预报 -->
    <el-dialog
      :visible.sync="isShowWeatherForecast"
      title="天气预报"
      @close="isShowWeatherForecast = false"
    >
      <el-table :data="weatherForecastList">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80"
        />

        <el-table-column
          label="日期"
          prop="date"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          label="最高气温"
          prop="tem1"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          label="最低气温"
          prop="tem2"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          label="天气"
          prop="wea"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          label="空气质量"
          prop="air_level"
          align="center"
          show-overflow-tooltip
          width="300"
        />
      </el-table>
    </el-dialog>

    <!-- 预警 -->
    <el-dialog
      :visible.sync="isShowearlyWarning"
      title="预警"
      @close="isShowearlyWarning = false"
    >
      <el-table :data="wearlyWarningList">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80"
        />

        <el-table-column
          label="日期"
          prop="date"
          align="center"
          width="120"
          show-overflow-tooltip
        />

        <el-table-column
          label="日出时间"
          prop="sunrise"
          align="center"
          width="120"
          show-overflow-tooltip
        />

        <el-table-column
          label="日落时间"
          prop="sunset"
          align="center"
          width="120"
          show-overflow-tooltip
        />

        <el-table-column
          label="预警信息"
          prop="narrative"
          align="center"
          show-overflow-tooltip
        />
      </el-table>
    </el-dialog>

    <!-- 生活建议 -->
    <el-dialog
      :visible.sync="isShowSuggest"
      title="生活建议"
      @close="isShowSuggest = false"
    >
      <div class="suggest">
        <div class="suggest-item">
          <img
            src="../../assets/image/51cad6ec93a8041f3a937790d8522100b37c48e7184f9-3ivWdy_fw658webp.webp"
            alt=""
          >
          <p>{{ suggestList.kouzhao }}</p>
        </div>

        <div class="suggest-item">
          <img
            src="../../assets/image/3ded28c0b006170eb812fa4e9d042a0184b85e82fdae1-vVhwz7_fw658webp.webp"
            alt=""
          >
          <p>{{ suggestList.yundong }}</p>
        </div>

        <div class="suggest-item">
          <img
            src="../../assets/image/274217a8fce618a8ae30c831a5b791b9db0c69863b920-ouQ2YI_fw658webp.webp"
            alt=""
          >
          <p>{{ suggestList.waichu }}</p>
        </div>

        <div class="suggest-item">
          <img
            src="../../assets/image/1753b261c6957f0bfe8d5f98b18c0071e313dc40189008-IYzyce_fw658webp.webp"
            alt=""
          >
          <p>{{ suggestList.kaichuang }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWeatherList } from '@/api/weather'
export default {
  data() {
    return {
      dataList: [],
      loading: false,
      isShowForecastTemperature: false,
      isShowearlyWarning: false,
      wearlyWarningList: [],
      isShowWeatherForecast: false,
      weatherForecastList: [],
      isShowSuggest: false,
      suggestList: {}
    }
  },

  mounted() {
    this.getInfo()
  },

  methods: {
    async getInfo() {
      this.loading = true
      const result = await getWeatherList({})
      console.log(result, 'result')
      if (result.code == 20000) {
        this.dataList = result.data
        this.loading = false
      }
    },

    forecastTemperature(item) {
      this.isShowForecastTemperature = true
      this.$nextTick(() => {
        const myChart = this.$echarts.init(this.$refs.myChart)
        const data = []
        const maxTem = [] // 最高温度
        const minTem = [] // 最低温度
        item.next_seven_days_weather.forEach((row) => {
          data.push(row.date)
          maxTem.push(row.tem1)
          minTem.push(row.tem2)
        })

        const option = {
          title: {
            text: '未来七天-模型预测'
          },
          color: ['#4dabf7', '#e03131'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['最低温度', '最高温度']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: data
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '最低温度',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: minTem
            },
            {
              name: '最高温度',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: maxTem
            }
          ]
        }
        myChart.setOption(option)
      })
    },

    earlyWarning(item) {
      this.isShowearlyWarning = true
      this.wearlyWarningList = item.next_seven_days_weather
    },

    weatherForecast(item) {
      this.isShowWeatherForecast = true
      this.weatherForecastList = item.next_seven_days_weather
    },

    suggest(item) {
      this.isShowSuggest = true
      this.suggestList = {
        kouzhao: item.aqi.kouzhao,
        yundong: item.aqi.yundong,
        waichu: item.aqi.waichu,
        kaichuang: item.aqi.kaichuang,
        jinghuaqi: item.aqi.jinghuaqi
      }
    }
  }
}
</script>

<style scoped>
.boxCard {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}
.card {
  width: 24%;
  height: 100%;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #f3f5f2;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.top {
  width: 100%;
  height: 40%;
  box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.3);
  padding: 10px;
  box-sizing: border-box;
}

.city {
  width: 100%;
  text-align: center;
  font-weight: 700;
}

.weather {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #9f9f9c;
}
.image {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.image .temperature {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
}

.image img {
  width: 120px;
  height: 120px;
}

.top .hint {
  width: 100%;
  height: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #999;
  padding-top: 15%;
  box-sizing: border-box;
}

.top .hint img {
  width: 26px;
  height: 26px;
  margin-right: 15px;
}

.centet {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid #dddfdd;
  padding: 10px;
  box-sizing: border-box;
}

.centet .info {
  width: 100%;
  font-size: 12px;
  color: #666;
}

.centet .info p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}

.centet .table {
  width: 100%;
  font-size: 14px;
  color: #666;
}

.centet .table p {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 24px 0;
}

.button {
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}

.suggest {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.suggest .suggest-item {
  width: 49%;
  height: 130px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  margin-bottom: 15px;
  border-radius: 8px;
}

.suggest .suggest-item img {
  width: 20%;
}

.suggest .suggest-item p {
  width: 80%;
  text-align: center;
  font-size: 14px;
  color: #666;
}
</style>
